<script setup lang="ts">
import {getColor} from "@/utils/ColorUtils";
import type {CircleVO} from "@/types/vo/CircleVO";

const { circleInfo, callback, activeId, index } = defineProps<{
  index: number
  circleInfo: CircleVO
  callback?: (circle: CircleVO) => any
  activeId: number | undefined
}>()

const handleClick = () => {
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  callback && callback(circleInfo)
}

const isActive = computed(() => {
  return circleInfo?.id === activeId
})
</script>
<template>
  <div
    class="category relative w-180px  py-6px rounded-8px mb-15px cursor-pointer hover:transform-translate-x-6px"
    :class="{
      active: isActive,
    }"
    :style="{
      backgroundColor: getColor(index),
    }"
    @click="handleClick"
  >
    <n-image :src="circleInfo?.icon" class="w-20px h-20px" />
    <span class="font-size-16px">{{ circleInfo?.circleName }}</span>
  </div>
</template>

<style lang="scss" scoped>
.category {
  display: flex;
  align-items: center;
  justify-content: start;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  color: #333; // 默认深灰，提高可读性
  background-color: var(--bg-color);
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  padding: 8px 16px;
  gap:20px;

  &.active {
    background-color: #d4ebff; // 选中时更深的淡蓝色
    border-color: #66b2ff; // 选中状态边框更突出
    color: #0056b3; // 选中文本更深，增强可读性
    font-weight: 600; // 选中状态稍微加粗
    box-shadow: inset 0 0 5px rgba(0, 86, 179, 0.2); // 轻微内阴影，突出选中效果
  }

  &:hover {
    background-color: #f5f5f5;
    border-color: #d9d9d9;
  }

  &:active {
    background-color: #ebebeb;
  }
}
</style>
